<template>
  <div class="bei">
    <div class="top">
      <span>简体中文(中国)</span>
    </div>
    <div class="login">
      <img src="../logo.jpg" alt="" />
      <div class="inp te">
        <input type="text" v-model="phone" placeholder="输入手机号" />
      </div>
      <div class="inp">
        <input type="password" placeholder="输入密码" v-model="pass" />
      </div>
      <button @click="login">登录</button>
      <button @click="gorister">注册</button>
    </div>
  </div>
</template>
  
  <script setup>
import axios from "axios";
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import "../mock/orderMock";
var route = useRoute();
var router = useRouter();

let phone = ref();
let pass = ref();
let login = () => {
  // phone.value == false && 
  if (/^1[3-9]\d{9}$/.test(phone.value) == false) {
    alert("请输入正确手机号");
  } else if (pass.value == '') {
    alert("请输入密码");
  } else {
    axios
      .post("/api/user/login", { phone: phone.value, pass: pass.value })
      .then((res) => {
        console.log(res.data);
        if (res.data.code == 1) {
          router.push('/index/home')
        } else if(res.data.code == 0){
          alert("密码错误");
        }else if(res.data.code == -1){
          alert('账号不存在');
        }
      });
  }
};
// 去注册
let gorister = () => {
  router.push("/register");
};
// var phone = ref();
// var password = ref();
// var loginarr = ref({
//   phone: phone,
//   password: password,
// });
// var login = () => {
//   axios.post("/api/user/login", loginarr.value).then((res) => {
//     if (res.status == 200) {
//       console.log(res.data);
//       router.push("/index/home");
//     }
//   });
// };
</script>
  
  <style scoped>
* {
  margin: 0;
  padding: 0;
}
body {
  height: 100%;

  background-size: cover;
}
.bei {
  width: 100%;
  height: 770px;

  background-image: url(../src/views/背景.gif);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.top {
  background-color: #999;
  height: 30px;
  width: 100%;
  color: aliceblue;
  line-height: 30px;
}
.top span {
  float: right;
  margin-right: 50px;
}
.login {
  width: 500px;
  height: 300px;

  border-radius: 10px;
  text-align: center;

  margin: 0 auto;
}
.inp {
  margin-top: 20px;
}
.inp input {
  width: 380px;
  height: 30px;
  border: none;
  outline: none;
  border-radius: 20px;
  padding-left: 20px;
  background: burlywood;
}
.login img {
  height: 150px;
  border-radius: 20px;
  margin-top: 150px;
}
.login button {
  width: 400px;
  height: 30px;
  border-radius: 20px;
  margin-top: 20px;
  border: none;
  background-color: skyblue;
}
</style>